<!--
* description: 车型维护
* author: duanhy
* createdDate: 2020-12-4
-->
<template>
  <div class="app-container app-container-table">
    <!-- 单表格模版页面 -->
    <one-table-template
      ref="multipleTable"
      :dynamic-api-config="apiConfig"
      :dynamic-buttons="dynamicButtons"
      :dynamic-components="tableComponents"
      :dynamic-table-cols="dynamicTableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="false"
      :dynamic-is-show-select="false"
      :refresh-table-key="refreshTableKey"
    />
    <Edit
      v-if="dialogShow"
      :is-dialog-visible="dialogShow"
      :data-for-form="editRowData"
      :title-name="titleName"
      :edit-data="editData"
      @closeEdit="closeEdit"
    />
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { orgApis } from '@/api/apiList/org'
import OneTableTemplate from '@/components/templates/oneTable'
import Edit from './edit'
import Vue from 'vue'
export default {
  name: 'CarType',
  components: {
    OneTableTemplate,
    Edit
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      }
    )
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      editData: {},
      titleName: '车型维护',
      refreshTableKey: '0',
      dialogShow: false,
      editPopupsState: 'add',
      //   editRowData: {},
      // table表格查询API配置对象
      apiConfig: {
        ServiceCode: 'queryCarTypeMainTain',
        APIUrl: '/mp/e3sh/vesale/basics/carTypeMainTainService/queryCarTypeMainTain.do'
      },
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '车系编码：',
              codeField: 'carSeriesCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: this.spanNum()
            },
            {
              compKey: 'compKey2',
              labelName: '车系名称：',
              codeField: 'carSeriesCn',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: this.spanNum()
            },
            {
              compKey: 'compKey3',
              labelName: '车型编码：',
              codeField: 'carConfigCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: this.spanNum()
            },
            {
              compKey: 'compKey4',
              labelName: '车型名称：',
              codeField: 'carConfigCn',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: this.spanNum()
            },
            {
              compKey: 'compKey5',
              labelName: '状态：',
              codeField: 'isEnableCode',
              component: () => import('@/components/org/isEnable/isEnableOne'),
              type: 'dropdownList',
              isMust: false,
              span: this.spanNum()
            },
            {
              compKey: 'compKey6',
              labelName: '车型销售状态：',
              codeField: 'SaleStatus',
              lookuptype: 'VE1323',
              component: () => import('@/components/org/LookupValue'),
              type: 'dropdownList',
              isMust: false,
              span: 6
            }
          ],
      // form 的表单对象
      formField: {
        SaleStatus: '',
        carSeriesCn: '',
        carSeriesCode: '',
        carConfigCode: '',
        carConfigCn: '',
        isEnableCode: '1'
      },
      // 动态组件-按钮
      dynamicButtons:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          : [
            {
              compKey: 'btnKey1',
              type: 'primary',
              size: 'small',
              name: 'search',
              clickEvent: () => this.queryTable(1),
              text: '查询'
            },
            {
              compKey: 'btnKey2',
              type: '',
              size: 'small',
              name: 'reset',
              clickEvent: () => this.resets(),
              text: '重置'
            },
            {
              compKey: 'btnKey3',
              type: '',
              size: 'small',
              name: 'export',
              position: 'left',
              clickEvent: () => this.export(),
              text: '导出'
            }
          ],
      // 动态组件-表格网格列
      dynamicTableCols:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length >
          0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
          : [
            {
              label: '操作',
              minWidth: 180,
              fixed: true,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey1',
                  labelName: '编辑',
                  component: () => import('@/components/org/linkButton'),
                  clickEvent: (index) => this.edit(index)
                }
              ]
            },
            {
              prop: 'updateControlId',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'carSeriesCode',
              label: '车系编码'
            },
            {
              prop: 'carSeriesCn',
              label: '车系名称'
            },
            {
              prop: 'carConfigCode',
              label: '车型编码'
            },
            {
              prop: 'carConfigCn',
              label: '车型名称'
            },
            {
              prop: 'carTypePrice',
              label: '车型价格'
            },
            {
              prop: 'isEnableCode',
              label: '状态'
            },
            {
              prop: 'SaleStatus',
              label: '车型销售状态'
            }
          ]
    }
  },
  mounted() {
    // 列表查询
    const that = this
    setTimeout(function() {
      that.queryTable(1)
    }, 0)
  },
  methods: {
    spanNum() {
      return 6
    },
    // 重置
    resets() {
      this.reset()
      this.formField.carSeriesCn = ''
    },

    // 导出
    export() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      month = (month < 10 ? '0' + month : month)
      day = (day < 10 ? '0' + day : day)
      var mydate = year.toString() + month.toString() + day.toString()
      const returnObj = {
        // api配置
        apiConfig: {
          APIUrl: '/mp/e3sh/vesale/basics/carTypeMainTainService/queryCarTypeMainTainExcel.do'
        },
        variables: this.formField
      }
      returnObj.variables.dataType = 'excel'
      const paramD = this.$getParams(returnObj)

      this.$requestAPI(paramD).then(res => {
        this.$utils.downloadFile(res, `车型维护${mydate}.xlsx`)
      })
    },
    // 编辑
    edit(index) {
      this.titleName = '车型维护'
      this.editData = this.$refs.multipleTable.list[index]
      this.dialogShow = true
    },

    // 关闭编辑页面
    closeEdit(type) {
      this.dialogShow = false
      if (type === 2) {
        this.dialogShow = false
        this.queryTable(1)
      }
    }
  }
}
</script>

